<template>
  <tr>
    <td>{{ list.id }}</td>
    <td>{{ list.name }}</td>
    <td>{{ list.date | initDate}}</td>
    <td>
      <button :disabled="flag" @click="onDel(list.id)">删除</button>
      <button @click="compile(list.name,list.id)">编辑</button>
    </td>
  </tr>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    list: {
      type: Object,
      required: true
    },
    getBook: {
      type: Function,
      required: true
    },
    lists: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      flag: false
    }
  },
  filters: {
    initDate (val) {
      const date = new Date(val)
      // console.log(date)
      const y = date.getFullYear()
      const m = (date.getMonth() + 1).toString().padStart(2, '0')
      const d = (date.getDate()).toString().padStart(2, '0')
      return `${y}-${m}-${d}`
    }
  },
  created () {
    this.onDel()
  },

  methods: {
    async  onDel (id) {
      if (this.lists.length === 1) {
        this.flag = true
        this.flag = false
      } else {
        try {
          await axios({
            url: '/books/' + id,
            method: 'delete'
          })
          this.getBook()
        } catch (err) {
          console.log(err)
        }
      }
    },
    compile (name, id) {
      this.$emit('compile', name, id)
    }
  }
}
</script>

<style scoped lang="less"></style>
